<template>
  <a-modal
    :visible.sync="showRemarkModal"
    title="备注修改历史"
    :footer="null"
    @cancel="closeModal"
    :destroy-on-close="true"
    width="30vw"
  >
    <a-spin :spinning="state.loadingRemarkHistory">
      <a-list
        class="remark-list-container"
        v-infinite-scroll="() => {}"
        :data-source="state.remarkHistory"
      >
        <a-list-item slot="renderItem" slot-scope="item">
          {{ item }}
        </a-list-item>
      </a-list>
    </a-spin>
  </a-modal>
</template>
<script>
import { todo_remark_history_post } from 'server/modules/7537'
export default {
  name: 'RemarkHistory',
  props: ['showRemarkModal', 'tableId'],
  data() {
    return {
      state: {
        loadingRemarkHistory: false,
        remarkHistory: []
      }
    }
  },
  watch: {
    showRemarkModal(val) {
      if (val) {
        this.state.loadingRemarkHistory = true
        this.state.remarkHistory = []
        todo_remark_history_post({
          bizId: this.tableId,
          bizType: 10
        }).then(res => {
          this.state.remarkHistory = res.data
            .sort((a, b) => b.gmtCreate.localeCompare(a.gmtCreate))
            .map(item => {
              return `${item.gmtCreate}; ${item.username}; 备注内容：${item.remark}`
            })
          if (this.state.remarkHistory.length === 0) {
            this.state.remarkHistory.push('暂无备注')
          }
          this.state.loadingRemarkHistory = false
        })
      }
    }
  },
  methods: {
    closeModal() {
      this.$emit('closeModal')
    }
  }
}
</script>
<style lang="less" scoped>
:deep(.ant-spin-container .remark-list-container) {
  border: 1px solid #e8e8e8;
  border-radius: 4px;
  overflow: auto;
  padding: 8px 24px;
  height: 300px;
}
</style>
